<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="shortcut icon" href="static/img/icon.ico">
    <title>联信UMRTC视频演示</title>
    <style>
      html, body, #app {
        width: 100%;
        height: 100%;
      }
      .downloadPWA {
        position: fixed;
        bottom: 0;
        height: 126px;
        background: #fff;
        width: 330px;
        justify-content: center;
        z-index: 9999;
        padding: 20px;
        box-sizing: border-box; 
        display: none;
        margin: 0 auto;
        left: 0;
        right: 0;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
        border-radius: 5px;
        font-size: 13px;
      }
    
      .downloadPWA p {
        margin-bottom: 20px;
        margin-top: 0;
        color: #333333;
      }
    
      .closeIcon {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }
    
      .downloadPWA .btnGroup {
        text-align: center;
      }
    
      .downloadPWA .btnGroup span {
        color: #409EFF;
        cursor: pointer;
      }
    
      .downloadPWA .btnGroup span:nth-child(2) {
        margin: 0 20px;
      }
    
      .downloadPWA #installBtn {
        width: 140px;
        height: 32px;
        line-height: 32px;
        background: #409EFF;
        border-radius: 3px;
        color: #FFFFFF;
        text-align: center;
        display: inline-block;
      }
    </style>
    <!-- PWA 应用设置 -->
    <meta property="og:image" content="static/img/icon-512.png">
    <link rel="manifest" href="static/pwa/manifest.webmanifest">
    <script src="static/serverconfig.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.staticfile.org/pwacompat/2.0.9/pwacompat.min.js" crossorigin="anonymous"></script>
    <script src="static/pwa/app.js" defer></script>
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
      // 初始化
      var vConsole = new VConsole();
      console.log('vconsole is ready');
    </script> -->
    <script>
      /** 解决ios10以上不支持meta标签禁止缩放的问题 */
      window.οnlοad = function () {
        document.addEventListener('touchstart', function (event) {
          if (event.touches.length > 1) {
            event.preventDefault();
          }
        });
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
          var now = (new Date()).getTime();
          if (now - lastTouchEnd <= 300) {
            event.preventDefault();
          }
          lastTouchEnd = now;
        }, false);
        document.addEventListener('gesturestart', function (event) {
          event.preventDefault();
        });
      }
    </script>
    <script>
      function closeDownload() {
        document.querySelector('.downloadPWA').style.display = 'none'
      }

      function notPrompt() {
        localStorage.setItem('promptPwa', false)
        closeDownload()
      }
    </script>
  </head>
  <body>
    <div class="downloadPWA">
      <p>生成桌面PWA快捷方式，无需下载安装便捷使用。 </p>
      <div class="btnGroup">
        <span id="installBtn">生成桌面快捷应用</span>
        <span onclick="closeDownload()">跳过</span>
        <span type="text" onclick="notPrompt()">不再显示</span>
      </div>
      <img src="static/img/icon2.png" alt="" class="closeIcon" onclick="closeDownload()">
    </div>
    <div id="app"></div>
  </body>
</html>
